<template>
  <div>
    <tabbar :dataLsit="dataLsit" title="地区" @clickEvent="dataLsitEvent"></tabbar>
    <tabbar :dataLsit="language" title="类型" @clickEvent="languageEvent"></tabbar>
    <tabbar :dataLsit="initials" fristname="上升最快" title="排序" @clickEvent="initialsEvent"></tabbar>
    <ul class="cradSong">
      <li v-for="item in mvList" :key="item.id" style="list-style: none;display: flex">
        <card :src="item.cover" :description='item.name' widthDu="300px"
              @click="$router.push( {path: '/mvList' ,query: {vid:item.id,type:'mv'}})"></card>
      </li>
    </ul>
  </div>
  <div style="height: 150px;"></div>
</template>

<script setup>
import tabbar from "~/pages/fristPage/singer/components/tabbar.vue"
import card from "~/components/card.vue"
import {SetentireApi} from "~/commonApi/api"
import {ref} from "vue";

const dataLsit = ref([
  {name: '全部',},
  {name: '内地',},
  {name: '港台',},
  {name: '欧美',},
  {name: '日本',},
  {name: '韩国',}
])
const language = ref([
  {name: '全部'},
  {name: '官方版'},
  {name: '原生'},
  {name: '现在版'},
  {name: '网易出品'},
])
const initials = ref([
  {name: '上升最快'},
  {name: '最热'},
  {name: '最新'},
])
const mvList = ref([])
const area = ref('全部')
const type = ref('全部')
const order = ref('上升最快')
const data = async () => {
  const res = await SetentireApi({
    area: area.value,
    type: type.value,
    order: order.value,
  })
  mvList.value = res.data
  console.log(res, 'res')
}
data()
const dataLsitEvent = (item) => {
  area.value = item.name
  data()
}
const languageEvent = (item) => {
  type.value = item.name
  data()
}
const initialsEvent = (item) => {
  order.value = item.name
  data()
}

</script>

<style scoped>
.cradSong {
/ / overflow: auto;
  display: grid;
  grid-template-columns: repeat(4, 25%);
}

</style>